<template>
  <div class="antifraud-tutorial">
    <div class="page-header">
      <h1>防诈骗教程</h1>
      <p>全面了解诈骗手法，掌握防范技巧</p>
    </div>

    <!-- 教程分类 -->
    <div class="tutorial-categories">
      <div class="category-card" v-for="category in categories" :key="category.id">
        <div class="category-icon">
          <i :class="category.icon"></i>
        </div>
        <h3>{{ category.name }}</h3>
        <p>{{ category.description }}</p>
        <div class="category-stats">
          <span>{{ category.totalTutorials }}个教程</span>
          <span>{{ category.completedTutorials }}个已完成</span>
        </div>
        <button class="btn btn-primary" @click="enterCategory(category.id)">
          开始学习
        </button>
      </div>
    </div>

    <!-- 推荐教程 -->
    <div class="recommended-tutorials">
      <h2>推荐教程</h2>
      <div class="tutorial-grid">
        <div class="tutorial-card" v-for="tutorial in recommendedTutorials" :key="tutorial.id">
          <div class="tutorial-image">
            <img :src="tutorial.thumbnail" :alt="tutorial.title">
            <div class="tutorial-duration">{{ tutorial.duration }}</div>
          </div>
          <div class="tutorial-content">
            <div class="tutorial-category">{{ tutorial.category }}</div>
            <h3>{{ tutorial.title }}</h3>
            <p>{{ tutorial.description }}</p>
            <div class="tutorial-meta">
              <span class="difficulty" :class="tutorial.difficulty">{{ tutorial.difficultyText }}</span>
              <span class="rating">
                <i class="fas fa-star"></i>
                {{ tutorial.rating }}
              </span>
            </div>
            <div class="tutorial-progress">
              <div class="progress-bar">
                <div class="progress-fill" :style="{width: tutorial.progress + '%'}"></div>
              </div>
              <span>{{ tutorial.progress }}%</span>
            </div>
            <button class="btn btn-primary" @click="startTutorial(tutorial)">
              {{ tutorial.progress > 0 ? '继续学习' : '开始学习' }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新教程 -->
    <div class="latest-tutorials">
      <h2>最新教程</h2>
      <div class="tutorial-list">
        <div class="tutorial-item" v-for="tutorial in latestTutorials" :key="tutorial.id">
          <div class="tutorial-thumbnail">
            <img :src="tutorial.thumbnail" :alt="tutorial.title">
          </div>
          <div class="tutorial-info">
            <div class="tutorial-category">{{ tutorial.category }}</div>
            <h3>{{ tutorial.title }}</h3>
            <p>{{ tutorial.description }}</p>
            <div class="tutorial-details">
              <span class="duration">{{ tutorial.duration }}</span>
              <span class="views">{{ tutorial.views }} 观看</span>
              <span class="date">{{ formatDate(tutorial.publishDate) }}</span>
            </div>
          </div>
          <div class="tutorial-actions">
            <button class="btn btn-primary" @click="startTutorial(tutorial)">
              观看
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习成就 -->
    <div class="learning-achievements">
      <h2>学习成就</h2>
      <div class="achievement-grid">
        <div class="achievement-card" v-for="achievement in achievements" :key="achievement.id">
          <div class="achievement-icon">
            <i :class="achievement.icon"></i>
          </div>
          <h3>{{ achievement.title }}</h3>
          <p>{{ achievement.description }}</p>
          <div class="achievement-progress">
            <div class="progress-bar">
              <div class="progress-fill" :style="{width: achievement.progress + '%'}"></div>
            </div>
            <span>{{ achievement.progress }}%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习统计 -->
    <div class="learning-stats">
      <h2>学习统计</h2>
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon">
            <i class="fas fa-play-circle"></i>
          </div>
          <div class="stat-info">
            <h3>{{ totalWatchTime }}</h3>
            <p>总观看时长</p>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">
            <i class="fas fa-check-circle"></i>
          </div>
          <div class="stat-info">
            <h3>{{ completedTutorials }}</h3>
            <p>已完成教程</p>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">
            <i class="fas fa-trophy"></i>
          </div>
          <div class="stat-info">
            <h3>{{ earnedCertificates }}</h3>
            <p>获得证书</p>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">
            <i class="fas fa-fire"></i>
          </div>
          <div class="stat-info">
            <h3>{{ studyStreak }}</h3>
            <p>连续学习天数</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 测试中心 -->
    <div class="test-center">
      <h2>测试中心</h2>
      <div class="test-grid">
        <div class="test-card" v-for="test in tests" :key="test.id">
          <div class="test-icon">
            <i :class="test.icon"></i>
          </div>
          <div class="test-info">
            <h3>{{ test.title }}</h3>
            <p>{{ test.description }}</p>
            <div class="test-meta">
              <span class="questions">{{ test.questions }}题</span>
              <span class="time">{{ test.timeLimit }}分钟</span>
              <span class="score">最高分: {{ test.bestScore }}</span>
            </div>
          </div>
          <div class="test-actions">
            <button class="btn btn-primary" @click="startTest(test)">
              开始测试
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 统计数据
const totalWatchTime = ref('18小时')
const completedTutorials = ref(24)
const earnedCertificates = ref(8)
const studyStreak = ref(12)

// 教程分类
const categories = ref([
  {
    id: 'telecom',
    name: '电信诈骗',
    description: '了解电信诈骗的常见手法和防范措施',
    icon: 'fas fa-phone',
    totalTutorials: 12,
    completedTutorials: 8
  },
  {
    id: 'network',
    name: '网络诈骗',
    description: '学习网络诈骗的识别和防范技巧',
    icon: 'fas fa-globe',
    totalTutorials: 15,
    completedTutorials: 6
  },
  {
    id: 'financial',
    name: '金融诈骗',
    description: '掌握金融诈骗的防范和应对方法',
    icon: 'fas fa-credit-card',
    totalTutorials: 10,
    completedTutorials: 4
  },
  {
    id: 'social',
    name: '社交诈骗',
    description: '识别社交平台上的诈骗陷阱',
    icon: 'fas fa-users',
    totalTutorials: 8,
    completedTutorials: 3
  }
])

// 推荐教程
const recommendedTutorials = ref([
  {
    id: 1,
    title: '识别冒充公检法诈骗',
    description: '学习如何识别和防范冒充公检法人员的诈骗',
    category: '电信诈骗',
    difficulty: 'beginner',
    difficultyText: '入门',
    duration: '15分钟',
    rating: 4.8,
    progress: 75,
    thumbnail: '/api/placeholder/300/200'
  },
  {
    id: 2,
    title: '网络购物诈骗防范',
    description: '了解网络购物中的常见诈骗手法',
    category: '网络诈骗',
    difficulty: 'intermediate',
    difficultyText: '中级',
    duration: '20分钟',
    rating: 4.6,
    progress: 0,
    thumbnail: '/api/placeholder/300/200'
  },
  {
    id: 3,
    title: '投资理财诈骗识别',
    description: '识别虚假投资理财产品的诈骗',
    category: '金融诈骗',
    difficulty: 'advanced',
    difficultyText: '高级',
    duration: '25分钟',
    rating: 4.9,
    progress: 30,
    thumbnail: '/api/placeholder/300/200'
  }
])

// 最新教程
const latestTutorials = ref([
  {
    id: 4,
    title: '2024年最新诈骗手法解析',
    description: '分析2024年出现的新型诈骗手法',
    category: '综合防范',
    duration: '22分钟',
    views: 1234,
    publishDate: '2024-01-20',
    thumbnail: '/api/placeholder/100/70'
  },
  {
    id: 5,
    title: 'AI换脸诈骗防范指南',
    description: '了解AI换脸技术在诈骗中的应用及防范',
    category: '技术诈骗',
    duration: '18分钟',
    views: 2156,
    publishDate: '2024-01-18',
    thumbnail: '/api/placeholder/100/70'
  },
  {
    id: 6,
    title: '老年人防诈骗专题',
    description: '针对老年人群体的诈骗防范教程',
    category: '特殊群体',
    duration: '30分钟',
    views: 987,
    publishDate: '2024-01-15',
    thumbnail: '/api/placeholder/100/70'
  }
])

// 学习成就
const achievements = ref([
  {
    id: 1,
    title: '防诈新手',
    description: '完成第一个防诈骗教程',
    icon: 'fas fa-shield-alt',
    progress: 100
  },
  {
    id: 2,
    title: '电信专家',
    description: '完成所有电信诈骗教程',
    icon: 'fas fa-phone',
    progress: 67
  },
  {
    id: 3,
    title: '网络卫士',
    description: '完成所有网络诈骗教程',
    icon: 'fas fa-globe',
    progress: 40
  },
  {
    id: 4,
    title: '金融守护者',
    description: '完成所有金融诈骗教程',
    icon: 'fas fa-credit-card',
    progress: 40
  }
])

// 测试
const tests = ref([
  {
    id: 1,
    title: '电信诈骗识别测试',
    description: '测试您对电信诈骗的识别能力',
    icon: 'fas fa-phone',
    questions: 20,
    timeLimit: 30,
    bestScore: 85
  },
  {
    id: 2,
    title: '网络诈骗防范测试',
    description: '评估您的网络诈骗防范知识',
    icon: 'fas fa-globe',
    questions: 25,
    timeLimit: 35,
    bestScore: 92
  },
  {
    id: 3,
    title: '综合防诈骗测试',
    description: '全面测试您的防诈骗能力',
    icon: 'fas fa-shield-alt',
    questions: 30,
    timeLimit: 45,
    bestScore: 78
  }
])

// 方法
const enterCategory = (categoryId) => {
  alert(`进入分类: ${categoryId}`)
}

const startTutorial = (tutorial) => {
  alert(`开始教程: ${tutorial.title}`)
}

const startTest = (test) => {
  alert(`开始测试: ${test.title}`)
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString()
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
.antifraud-tutorial {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.tutorial-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.category-card {
  background: white;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}

.category-card:hover {
  transform: translateY(-5px);
}

.category-icon {
  font-size: 48px;
  color: #1e3c72;
  margin-bottom: 20px;
}

.category-card h3 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.category-card p {
  color: #666;
  margin-bottom: 15px;
}

.category-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

.recommended-tutorials {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.recommended-tutorials h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.tutorial-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.tutorial-card:hover {
  transform: translateY(-2px);
}

.tutorial-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.tutorial-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tutorial-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.tutorial-content {
  padding: 20px;
}

.tutorial-category {
  color: #17a2b8;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}

.tutorial-content h3 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.tutorial-content p {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.tutorial-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.difficulty {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.difficulty.beginner {
  background: #d4edda;
  color: #155724;
}

.difficulty.intermediate {
  background: #fff3cd;
  color: #856404;
}

.difficulty.advanced {
  background: #f8d7da;
  color: #721c24;
}

.rating {
  color: #ffc107;
  font-size: 14px;
}

.tutorial-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #28a745;
  transition: width 0.3s ease;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.latest-tutorials {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.latest-tutorials h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.tutorial-list {
  display: grid;
  gap: 20px;
}

.tutorial-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  align-items: center;
}

.tutorial-thumbnail {
  width: 100px;
  height: 70px;
  border-radius: 4px;
  overflow: hidden;
}

.tutorial-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tutorial-info {
  flex: 1;
}

.tutorial-info h3 {
  color: #1e3c72;
  margin-bottom: 8px;
}

.tutorial-info p {
  color: #666;
  margin-bottom: 10px;
}

.tutorial-details {
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: #666;
}

.learning-achievements {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.learning-achievements h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.achievement-card {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  text-align: center;
}

.achievement-icon {
  font-size: 48px;
  color: #1e3c72;
  margin-bottom: 15px;
}

.achievement-card h3 {
  color: #1e3c72;
  margin-bottom: 10px;
}

.achievement-card p {
  color: #666;
  margin-bottom: 15px;
}

.achievement-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.learning-stats {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.learning-stats h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-icon {
  width: 50px;
  height: 50px;
  background: #1e3c72;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.stat-info h3 {
  color: #1e3c72;
  margin: 0 0 5px 0;
}

.stat-info p {
  color: #666;
  margin: 0;
  font-size: 14px;
}

.test-center {
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.test-center h2 {
  color: #1e3c72;
  margin-bottom: 20px;
}

.test-grid {
  display: grid;
  gap: 20px;
}

.test-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.test-icon {
  width: 60px;
  height: 60px;
  background: #1e3c72;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.test-info {
  flex: 1;
}

.test-info h3 {
  color: #1e3c72;
  margin-bottom: 8px;
}

.test-info p {
  color: #666;
  margin-bottom: 10px;
}

.test-meta {
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: #666;
}

@media (max-width: 768px) {
  .tutorial-categories {
    grid-template-columns: 1fr;
  }
  
  .tutorial-grid {
    grid-template-columns: 1fr;
  }
  
  .tutorial-item {
    flex-direction: column;
    text-align: center;
  }
  
  .achievement-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .test-card {
    flex-direction: column;
    text-align: center;
  }
}
</style> 